<template>
  <div class="page">
    <at-card>
      <at-card style="margin-bottom: 20px">
        <h4 slot="title">知识库查询</h4>
        <div class="search">
          <span>输入关键字：</span>
          <at-input style="width: 200px"></at-input>
          <at-button>查询</at-button>
        </div>
      </at-card>
      <el-row :gutter="12">
        <el-col :span="5">
          <at-menu :activeName="activeName" @on-select="handleChange">
            <at-menu-item name="3">
              <i class="icon icon-layers"></i>
              质检管理
            </at-menu-item>
            <at-menu-item name="1">
              <i class="icon icon-layers"></i>
              客户管理
            </at-menu-item>
            <at-menu-item name="2">
              <i class="icon icon-layers"></i>
              工单
            </at-menu-item>
            <at-menu-item name="4">
              <i class="icon icon-layers"></i>
              月度营销额
            </at-menu-item>
            <at-menu-item name="5">
              <i class="icon icon-layers"></i>
              客户满意度
            </at-menu-item>
            <at-menu-item name="6">
              <i class="icon icon-layers"></i>
              系统设置
            </at-menu-item>
          </at-menu>
        </el-col>
        <el-col :span="19">
          <at-card v-if="activeName === '1'">
            <at-table
              key="1"
              :columns="tableA.col"
              :data="tableA.data"
            ></at-table>
            <div style="text-align: right; margin-top: 20px">
              <at-button style="margin-right: 10px">上一页</at-button>
              <at-button>下一页</at-button>
            </div>
          </at-card>
          <at-card v-if="activeName === '2'">
            <at-table
              key="2"
              :columns="tableB.col"
              :data="tableB.data"
            ></at-table>
            <div style="text-align: right; margin-top: 20px">
              <at-button style="margin-right: 10px">上一页</at-button>
              <at-button>下一页</at-button>
            </div>
          </at-card>
          <at-card v-if="activeName === '3'">
            <at-table
              key="3"
              :columns="tableC.col"
              :data="tableC.data"
            ></at-table>
            <div style="text-align: right; margin-top: 20px">
              <at-button style="margin-right: 10px">上一页</at-button>
              <at-button>下一页</at-button>
            </div>
          </at-card>
        </el-col>
      </el-row>
    </at-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: '3',
      tableA: {
        col: [
          {
            title: '客户编号',
            key: 'colA'
          },
          {
            title: '名称',
            key: 'colB'
          },
          {
            title: '本月咨询次数',
            key: 'colC'
          },
          {
            title: '入网时间',
            key: 'colD'
          },
          {
            title: '操作',
            render: h => {
              return h('div', [
                h(
                  'ElButton',
                  {
                    props: {
                      size: 'small',
                      type: 'text'
                    }
                  },
                  '信息'
                ),
                h(
                  'ElButton',
                  {
                    props: {
                      size: 'small',
                      type: 'text'
                    }
                  },
                  '详情'
                ),
                h(
                  'ElButton',
                  {
                    props: {
                      size: 'small',
                      type: 'text'
                    }
                  },
                  '设置'
                )
              ])
            }
          }
        ],
        data: [
          {
            colA: 'BJ00045',
            colB: '赵洪',
            colC: '3',
            colD: '2019'
          },
          {
            colA: 'BJ00044',
            colB: '张三',
            colC: '2',
            colD: '2018'
          },
          {
            colA: 'BJ00043',
            colB: '李倩',
            colC: '1',
            colD: '2019'
          },
          {
            colA: 'BJ00042',
            colB: '孙磊',
            colC: '3',
            colD: '2018'
          },
          {
            colA: 'BJ00041',
            colB: '孙柳',
            colC: '3',
            colD: '2019'
          }
        ]
      },
      tableB: {
        col: [
          {
            title: '工单编号',
            key: 'colA'
          },
          {
            title: '工单类型',
            key: 'colB'
          },
          {
            title: '处理客服编号',
            key: 'colC'
          },
          {
            title: '是否解决问题',
            key: 'colD'
          },
          {
            title: '是否差评',
            key: 'colE'
          },
          {
            title: '工单时间',
            key: 'colF'
          },
          {
            title: '操作',
            render: h => {
              return h('div', [
                h(
                  'ElButton',
                  {
                    props: {
                      size: 'small',
                      type: 'text'
                    }
                  },
                  '详情'
                ),
                h(
                  'ElButton',
                  {
                    props: {
                      size: 'small',
                      type: 'text'
                    }
                  },
                  '客服信息'
                )
              ])
            }
          }
        ],
        data: [
          {
            colA: '0404300',
            colB: '微信云客服',
            colC: 'BJ00324',
            colD: '是',
            colE: '否',
            colF: '2020.5.21'
          },
          {
            colA: '0404299',
            colB: '微信云客服',
            colC: 'BJ00323',
            colD: '是',
            colE: '否',
            colF: '2020.5.21'
          },
          {
            colA: '0404298',
            colB: '微信云客服',
            colC: 'BJ00322',
            colD: '是',
            colE: '否',
            colF: '2020.5.21'
          },
          {
            colA: '0404297',
            colB: '微信云客服',
            colC: 'BJ003241',
            colD: '是',
            colE: '否',
            colF: '2020.5.21'
          },
          {
            colA: '0404296',
            colB: '微信云客服',
            colC: 'BJ00320',
            colD: '是',
            colE: '否',
            colF: '2020.5.21'
          },
          {
            colA: '0404295',
            colB: '微信云客服',
            colC: 'BJ00319',
            colD: '是',
            colE: '否',
            colF: '2020.5.21'
          },
          {
            colA: '0404294',
            colB: '微信云客服',
            colC: 'BJ00318',
            colD: '是',
            colE: '否',
            colF: '2020.5.21'
          },
          {
            colA: '0404293',
            colB: '微信云客服',
            colC: 'BJ00317',
            colD: '是',
            colE: '否',
            colF: '2020.5.21'
          },
          {
            colA: '0404292',
            colB: '微信云客服',
            colC: 'BJ00316',
            colD: '是',
            colE: '否',
            colF: '2020.5.21'
          },
          {
            colA: '0404291',
            colB: '微信云客服',
            colC: 'BJ00315',
            colD: '是',
            colE: '否',
            colF: '2020.5.21'
          },
          {
            colA: '0404290',
            colB: '微信云客服',
            colC: 'BJ00314',
            colD: '是',
            colE: '否',
            colF: '2020.5.21'
          },
          {
            colA: '0404289',
            colB: '微信云客服',
            colC: 'BJ00313',
            colD: '是',
            colE: '否',
            colF: '2020.5.21'
          },
          {
            colA: '0404288',
            colB: '微信云客服',
            colC: 'BJ00312',
            colD: '是',
            colE: '否',
            colF: '2020.5.21'
          },
          {
            colA: '0404287',
            colB: '微信云客服',
            colC: 'BJ00311',
            colD: '是',
            colE: '否',
            colF: '2020.5.21'
          },
          {
            colA: '0404286',
            colB: '微信云客服',
            colC: 'BJ00310',
            colD: '是',
            colE: '否',
            colF: '2020.5.21'
          }
        ]
      },
      tableC: {
        col: [
          {
            title: '质检通过率',
            key: 'colA'
          },
          {
            title: '转移量',
            key: 'colB'
          },
          {
            title: '未接听量',
            key: 'colC'
          },
          {
            title: '被投诉量',
            key: 'colD'
          },
          {
            title: '质检时间',
            key: 'colE'
          }
        ],
        data: [
          {
            colA: '99%',
            colB: '9%',
            colC: '0%',
            colD: '1%',
            colE: '2021.5'
          },
          {
            colA: '99%',
            colB: '7%',
            colC: '0%',
            colD: '1%',
            colE: '2021.4'
          },
          {
            colA: '99%',
            colB: '6%',
            colC: '0%',
            colD: '1%',
            colE: '2021.3'
          },
          {
            colA: '99%',
            colB: '9%',
            colC: '0%',
            colD: '1%',
            colE: '2021.2'
          },
          {
            colA: '99%',
            colB: '5%',
            colC: '0%',
            colD: '1%',
            colE: '2021.1'
          }
        ]
      }
    }
  },
  methods: {
    handleChange(val) {
      this.activeName = val
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  width: 70vw;
  margin: auto;
  margin-top: 20px;
  .search {
    display: flex;
    align-items: center;
    .at-btn {
      margin-left: 20px;
    }
  }
}
</style>
